<template>
	<view class="template-advertise">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack :bottomShadow="true">
			<view slot="back" :isBack="true" class='tn-custom-nav-bar__back'>
				<text v-if="!showHome" class='icon tn-icon-left' @click="goBack"></text>
				<text v-if="showHome" class='icon tn-icon-home-capsule-fill' @click="goHome"></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-white">我的成绩单</text>
			</view>
		</tn-nav-bar>


		<view class="banner">

			<swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="5000"
				@change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item image-banner">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					</view>
					<view class="swiper-item-text">


						<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
						<view class="tn-text-bold tn-color-white tn-padding-top-xs tn-padding-bottom-sm tnloukong"
							style="font-size: 60rpx;">
							{{item.name}}
						</view>

					</view>


					<!--  -->
					<div style="display: flex;">
						<div style="width: 50%;">


						</div>
						<div style="position: fixed;bottom: 20px;right: 20px;display: flex;">
							<van-image v-if="item.image_man" :src="item.image_man" width="140rpx" height="280rpx" />
							<van-image v-if="item.image_woman" :src="item.image_woman" width="140rpx" height="280rpx" />
						</div>
					</div>
				</swiper-item>
			</swiper>
			<view class="indication">
				<block v-for="(item,index) in swiperList" :key="index">
					<view class="spot" :class="cardCur==index?'active':''"></view>
				</block>
			</view>
		</view>

		<view class="adver-wrap tn-bg-white">
			<view class="tn-flex tn-flex-row-between tn-padding-top-lg">
				<view v-show="!mainInfoModel.bmti" class=" tn-margin tn-bg-white">
					<view class="tn-flex">
						<view class="tn-margin-sm">
							<view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
								<text class="">测试解读</text>
							</view>
							<view class="tn-padding-top-xs" style="min-height: 90rpx;">
								<text class="tn-text-df tn-color-gray  tn-text-justify">
									{{mainInfoModel.recordsItem.records}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>



			<view class="detail-img tn-padding">
				<view v-show="showBMTI">
					<BMTIWidget ref="BMTIWidget" />
					<!-- 2.能力 -->
					<Rander ref="BMTIRander" />
				</view>

				<!-- 1.分布图 -->
				<view v-show="!showBMTI">
					<Pie ref="Pie"></Pie>
					<!-- 2.能力 -->
					<Mount v-show="showMount == true" ref="Mount"></Mount>
					<Rander v-show="showMount == false" ref="Rander" />
					
					
					<!-- 3.分值 -->
					<Arcbar ref="Arcbar" />
				</view>
			</view>


			<view class="detail-img tn-padding">
				<view v-if="mainInfoModel.categoryList.length"
					v-for="(categoryitem,index) in mainInfoModel.categoryList" :key="index">
					<block v-if="categoryitem.video != '' && categoryitem.video ">
						<mainVideo :transferItem="categoryitem"></mainVideo>
					</block>
					<block v-else>
						<view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify tn-margin-bottom-sm">
							<text class="">{{categoryitem.title}}</text>
						</view>
						<view class="shadowBox">
							<view class="tn-flex">
								<view class="tn-margin-sm">
						
									<text class="tn-text-df tn-color-gray  tn-text-justify">
										{{categoryitem.des}}
									</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			
			
		

		



			<view style="width: 100%;height: 100rpx;">

			</view>

		</view>



		<view id="top-info"
			class="tn-footerfixed tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-safe-area-inset-bottom dd-glass"
			:style="{transform: `translateY(${topInfoTranslateY}px)`}" @click="showModal">
			<view class="justify-content-item tn-padding-bottom">
				<view class="tn-flex tn-flex-col-center tn-flex-row-left">
					<view class="user-pic">
						<view class="user-image">
							<view class="tn-shadow-blur"
								:style="{'background-image':'url('+mainInfoModel.userModel.avatar+')'}"
								style="width: 100rpx;height: 100rpx;background-size: cover;">
							</view>
						</view>
					</view>
					<view class="tn-padding-right tn-color-black">
						<view class="tn-padding-right tn-padding-left-sm">
							<text class="tn-text-lg tn-text-bold">{{mainInfoModel.userModel.nick_name}}</text>
							<text class="tn-padding-left-sm"></text>
						</view>
						<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
							<text class="tn-color-black tn-text-bold">推荐给朋友也测测吧</text>
						</view>
					</view>
				</view>
			</view>
			<view open-type="share"
				class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom"
				@click="shareManager">
				<view class="">
					<text class="tn-icon-wechat-fill tn-color-green--dark" style="font-size: 50rpx;"></text>
				</view>
				<view class="">
					<text class="tn-text-sm">分享</text>
				</view>
			</view>
		</view>


		<view class='tn-tabbar-height'></view>

		<ShareWidget ref="ShareWidget" />
	</view>
</template>

<script>
	import ShareWidget from '@/components/ShareWidget.vue'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import Rander from '@/components/chart/radar.vue'
	import Pie from '@/components/chart/Pie.vue'
	import Arcbar from '@/components/chart/Arcbar.vue'
	import Mount from '@/components/chart/Mount.vue'
	import BMTIWidget from '@/components/chart/BMTIWidget.vue'
	import mainVideo from '@/components/Video/video.vue'

	import {
		ResultResultDetail
	} from '@/api/history.js'

	export default {
		name: 'templateAdvertise',
		mixins: [template_page_mixin],
		components: {
			Rander,
			ShareWidget,
			Pie,
			Mount,
			Arcbar,
			BMTIWidget,
			mainVideo 
		},
		mounted() {

		},
		data() {
			return {
				// 0.是否显示回到首页按钮
				showHome: getCurrentPages().length == 1 ? true : false,
				// 2. 接口获取的详细信息
				mainInfoModel: {},
				// 3. 显示bmti
				showBMTI: false,
				// 显示山峰图还是雷达图
				showMount:false,
				


				cardCur: 0,
				swiperList: [],

				show1: false,

				show2: false,
				maskCloseable: true,

				topInfo: {
					height: 0,
				},
				topInfoTranslateY: 0,
				prevScrollTop: 0
			}
		},
		onLoad(item) {
			if (item) {
				this.interfaceResultResultDetail(item.id);
			}
		},
		onReady() {
			this.getTopInfoRect()
		},
		onPageScroll(e) {
			this.handlePageScroll(e.scrollTop)
		},
		onShareAppMessage() {

			var nPath = 'pages/question/questionDetail?type=share&' + 'partId=' + this.mainInfoModel.subjectModel.part_id;

			var title = '';
			if (this.mainInfoModel.subjectModel.share_info) {
				var list = this.mainInfoModel.subjectModel.share_info.split('??');
				title = list[0] + this.mainInfoModel.backInfo + list[1] + '，' + '你也来测测吧';
			}
			if (title == '') {
				title = "我推荐你也来测测吧。"
			}

			var ablum = this.mainInfoModel.subjectModel.ablum

			return {
				title: title,
				path: nPath, //点击分享链接之后进入的页面路径
				imageUrl: ablum,
			};
		},

		methods: {
			goBack() {
				uni.navigateBack();
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/root/main'
				});
			},

			shareManager() {
				var nPath = 'pages/question/questionDetail?type=share&' + 'partId=' + this.mainInfoModel.subjectModel
					.part_id;

				this.$refs.ShareWidget.open(nPath);
			},
			// 接口
			interfaceResultResultDetail(id) {
				var that = this;
				var params = {
					id: id
				}
				ResultResultDetail(params).then(res => {
					that.mainInfoModel = res;

					// 1. 头部
					var swiperItem = {
						id: that.mainInfoModel.resultModel.id,
						type: 'image',
						title: that.mainInfoModel.subjectModel.name,
						name: that.mainInfoModel.subjectModel.records_type == 'score' ? (that.mainInfoModel
							.resultModel.records_info + '分') : that.mainInfoModel.resultModel.records_info,
						text: '',
						url: that.mainInfoModel.recordsItem.records_img,
					}

					// 判断是否是BMTI模式
					if (that.mainInfoModel.bmti) {
						that.showBMTI = true;
						swiperItem.image_man = that.mainInfoModel.bmti.image_man;
						swiperItem.image_woman = that.mainInfoModel.bmti.image_woman;

						// 3.用户信息
						if (that.$refs.BMTIWidget) {
							that.$refs.BMTIWidget.drawAbilityCharts(that.mainInfoModel.bmti);
						}
					} else {
						debugger
						that.showBMTI = false;
						// 2. 分布图
						that.$refs.Pie.drawAbilityCharts(that.mainInfoModel);
						// 3.用户信息
						if (that.mainInfoModel.radar || that.mainInfoModel.recordsItem.radarTypeList.length) {
							
							if (that.mainInfoModel.radar.length > 5){
								that.showMount = true
								that.$refs.Mount.drawAbilityCharts(that.mainInfoModel);
							} else {
								that.showMount = false;
								that.$refs.Rander.drawAbilityCharts(that.mainInfoModel);
							}
							
						}

						// 4. 总分
						that.$refs.Arcbar.drawAbilityCharts(that.mainInfoModel);

					}

					that.swiperList = [swiperItem];
				});
			},






			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 复制微信号
			copyWechat() {
				wx.vibrateShort();
				uni.setClipboardData({
					data: "tnkewo",
				})
			},
			// 预览作者图片
			previewQRCodeImage() {
				wx.previewImage({
					urls: ['https://resource.tuniaokj.com/images/advertise/qrcode.jpg']
				})
			},
			// 获取顶部销售信息容器相关信息
			getTopInfoRect() {
				this._tGetRect('#top-info').then((res) => {
					if (!res) {
						setTimeout(() => {
							this.getTopInfoRect()
						}, 50)
						return
					}
					this.topInfo.height = res.height
				})
			},
			// 处理页面滚动事件
			handlePageScroll(scrollTop) {
				console.log(scrollTop);
				if (this.prevScrollTop > scrollTop) {

					// 内容下滑，即手指从下往上滚
					this.topInfoTranslateY = 0
				} else {
					// 内容上滑，即手指从上往下滚
					if (scrollTop > this.topInfo.height) {
						this.topInfoTranslateY = this.topInfo.height
					}

				}

				this.prevScrollTop = scrollTop
			},

			// 弹出模态框
			showModal(event) {
				this.openModal()
			},
			// 打开模态框
			openModal() {
				this.show1 = true
			},

			// 弹出压屏窗
			showLandscape() {
				this.openLandscape()
			},
			// 打开压屏窗
			openLandscape() {
				this.show2 = true
			},
			// 关闭压屏窗
			closeLandscape() {
				this.show2 = false
			},

			// 跳转到图鸟UI
			navTuniaoUI() {
				uni.navigateToMiniProgram({
					appId: 'wxf3d81a452b88ff4b'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 36%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}

	/* 渐变*/
	.tn-navbg {
		margin: 0;
		color: #fff;
		background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
		/* background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
		/* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
		/* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	/* 内容 */
	.adver-wrap {
		position: relative;
		z-index: 1;
		// padding: 20rpx 30rpx;
		margin-top: 700rpx;
		border-radius: 80rpx 80rpx 0 0;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}


	/* 用户头像 start */
	.user-image {
		width: 90rpx;
		height: 90rpx;
		position: relative;
	}

	.user-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	/* 富文本图示意 start */
	.detail-img {
		z-index: -1;
		padding-bottom: 40rpx;

		image {
			width: 100%;
			margin: 20rpx 0;
			// height: 3373rpx;
			// z-index: -1;
		}
	}


	.banner {
		position: fixed;
		top: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		will-change: transform;
		z-index: -1;
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 800rpx !important;
	}

	.card-swiper swiper-item {

		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		// padding: 0rpx 30rpx 90rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -320rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -280rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -150rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: #FFFFFF;
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		bottom: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		will-change: transform;
		z-index: 100;
	}


	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.shadowBox {
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 20rpx;
		margin: 0rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
</style>